<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="utf-8">
 
		<meta name="description" content="A Christmas tree built out of form elements." />
		<meta name="author" content="Hakim El Hattab" />
 
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
 
        <title>DOM Tree</title>
 
		<link href="css/domtree.css" rel="stylesheet" media="screen" />
 
		<link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
 
    </head>
    <body>
    	<div class="tree"></div>
 
		<script src="js/domtree.js"></script>
 
		<!-- Third party scripts and sharing UI -->
		<p class="project-title">DOM Tree</p>
 
		<div class="credits">
			<a href="https://blog.csdn.net/qq_53673551?spm=1000.2115.3001.5343">知心宝贝</a>
			<a href="https://twitter.com/hakimel">文章代码参考@hakimel</a>
		</div>
 
		<style type="text/css" media="screen">
			.project-title {
				position: absolute;
				left: 25px;
				bottom: 20px;
 
				font-size: 16px;
				color: #fff;
			}
 
			.credits {
				position: absolute;
				right: 20px;
				bottom: 25px;
				font-size: 15px;
				z-index: 20;
				color: #fff;
				vertical-align: middle;
			}
 
			.credits * + * {
				margin-left: 15px;
			}
 
			.credits a {
				padding: 8px 10px;
				color: rgba(255,255,255,0.7);
				border: 2px solid rgba(255,255,255,0.7);
				text-decoration: none;
			}
 
			.credits a:hover {
				border-color: #fff;
				color: #fff;
			}
 
			@media screen and (max-width: 1040px) {
				.project-title {
					display: none;
				}
 
				.credits {
					width: 100%;
					left: 0;
					right: auto;
					bottom: 0;
					padding: 30px 0;
					background: #b72424;
					text-align: center;
				}
 
				.credits a {
					display: inline-block;
					margin-top: 7px;
					margin-bottom: 7px;
				}
			}
		</style>
 
		<script>
			var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
			(function(d, t) {
			var g = d.createElement(t),
			    s = d.getElementsByTagName(t)[0];
			g.async = true;
			g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g, s);
			})(document, 'script');
		</script>
 
    </body>
</html>